<template>
	<view class="extension">
		<view class="nav flex_r_between">
			<view class="icon_back" @click="$native.backAction()">
				<u-icon name="arrow-left" size="40rpx"></u-icon>
			</view>
			<view class="nav_tab flex_center">
				<view @click="onTab(1)" :id="tab == 1 ? 'select' : ''">推广</view>
				<view @click="onTab(2)" :id="tab == 2 ? 'select' : ''">订单</view>
				<!-- <view class="red" @click="toBottom">有惊喜</view> -->
			</view>
			<view class="icon_back">
				<u-icon name="level" size="40rpx" color="#FFF"></u-icon>
			</view>
		</view>

		<view class="nav_box"></view>

		<view class="box" v-show="tab == 1">
			<view class="fixed_btn flex_r_between">
				<view class="box">
					<view class="price flex_center">
						<text>需要支付</text>
						<view>{{ (Number(config_price) * 10).toFixed(0) }}金币</view>
					</view>
					<!-- <view class="blacne flex_center">
						<text>当前余额</text>
						<view>{{ Number(balance).toFixed(0) }}金币</view>
					</view> -->
				</view>
				<view class="view" @click="readySubmit">确认推广</view>
			</view>

			<!-- 	<view class="tab flex_center">
				<view class="item" :id="type == 1 ? 'select' : ''" @click="onType(1)">
					作品
				</view>

				<view class="item" :id="type == 2 ? 'select' : ''" @click="onType(2)">
					直播
				</view>
			</view> -->

			<view class="card_list_box" v-if="type == 1">
				<view class="block flex_r_around" v-if="!list.length && type == 1 && total == 0" @click="toPub">
					<u-empty text="暂无动态，去发布" textColor="#FD2A53" iconColor="#FD2A53" mode="data">
					</u-empty>
				</view>
				<scroll-view scroll-x="true" @scrolltolower="getMoreArtice">
					<view class="card_list flex_center">
						<view class="item" v-for="(item,index) in list" :key="index" @click="setArtice(item)"
							:id="artice.id == item.id ? 'select' : ''">
							<artice ref="artice" :artice="item"></artice>
							<view class="icon">
								<u-icon name="checkmark-circle-fill" size="40rpx" color="#FD2A53"></u-icon>
							</view>
						</view>
						<u-loading-icon :show="loading" mode="circle" color="#FD2A53"></u-loading-icon>
					</view>
				</scroll-view>
			</view>

			<view class="form">
				<view class="form_title">选择曝光次数</view>
				<view class="config_box">
					<scroll-view scroll-x="true">
						<view class="config flex_center">
							<view class="item" :id="config_id == item.id ? 'select' : ''" v-for="(item,index) in config"
								:key="index" @click="chooseConfig(item)">

								<view class="top">
									<i>{{ item.num }}</i>
									<text>曝光</text>
								</view>

								<view class="line"></view>

								<view class="price">
									{{
										(Number(item.price) * 10).toFixed(0)
										
									}}金币
								</view>

							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="form">
				<view class="form_title">投放画像</view>
				<view class="content">
					<view class="content_list flex_r_between" @click="toChooseAddress">
						<view class="label">地区</view>
						<view class="right flex_center">
							<text>{{ areaSelect.length ? `已选择${areaSelect.length}个地区` : '不限' }}</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>

					<view class="content_list flex_r_between" @click="picker_flag = true">
						<view class="label">性别</view>
						<view class="right flex_center">
							<text>{{ sex }}</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>

					<view class="content_list flex_r_between" @click="age_flag = true">
						<view class="label">年龄</view>
						<view class="right flex_center">
							<text>{{ min ? `${min} - ${max}` : '不限' }}</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>

				</view>
			</view>

			<wheel ref="wheel" v-if="isShow == 1"></wheel>

		</view>

		<view class="box" v-if="tab == 2">
			<order ref="order"></order>
		</view>

		<!-- 弹窗 -->
		<u-picker closeOnClickOverlay :show="picker_flag" :columns="[['不限' , '男' , '女']]" @close="picker_flag = false"
			@cancel="picker_flag = false" @confirm="onSex">
		</u-picker>

		<!-- 年龄 -->
		<u-popup :show="age_flag" @close="age_flag = false" :round="20" :safeAreaInsetBottom="false">
			<view class="age">
				<view class="title">请输入年龄范围</view>
				<view class="age_input flex_center">
					<view class="num">
						<u-input border="none" placeholder="请输入" type="number" maxlength="2" v-model="min">
							<u-text text="岁" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
						</u-input>
					</view>

					<u-icon name="minus"></u-icon>

					<view class="num">
						<u-input border="none" placeholder="请输入" type="number" maxlength="2" v-model="max">
							<u-text text="岁" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
						</u-input>
					</view>
				</view>

				<view class="age_button" @click="ageSubmit">确认</view>
			</view>
		</u-popup>

		<!-- 支付弹窗 -->
		<u-popup mode="bottom" :show="to_pay_show" @close="to_pay_show = false" bgColor="transparent"
			:safeAreaInsetBottom="false">
			<view class="to_pay_show flex_c">
				<view class="title">支付</view>
				<view class="price">
					<i>￥</i>
					<text>{{ config_price }}</text>
				</view>
				<view class="pay_type">
					<view class="item flex_r_between" @click="pay_type = 1">
						<view class="left flex_center">
							<image src="/static/public/wechat.png"></image>
							<text>微信</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 1 ? '_s' : ''}.png`"></image>
						</view>
					</view>

					<view class="item flex_r_between" @click="pay_type = 2">
						<view class="left flex_center">
							<image src="/static/public/alipay.png"></image>
							<text>支付宝</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 2 ? '_s' : ''}.png`"></image>
						</view>
					</view>


				</view>
				<view class="btn" @click="onSubmit">确认支付</view>
			</view>
		</u-popup>

		<!-- 余额不足 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :closeOnClickOverlay="true" mode="center" :show="show_pay" bgColor="transparent"
				@close="show_pay = false">
				<view class="popup flex_c">
					<view class="popup_title">金币不足</view>
					<view class="popup_text">金币余额不足，是否立即充值</view>
					<view class="btn flex_center">
						<view class="btn1" @click="show_pay = false">取消</view>
						<view class="btn2" @click="$native.toJinBiRecharge()">去充值</view>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- model 弹窗 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-modal :show="showmodel" title="提示" :content='msg' @close="showmodel = false" @cancel="showmodel = false"
				:confirmText="code == 401 || code == 402 ? `去获得` : `` "
				:cancelText="code == 401 || code == 402 ? `取消` : `我知道了`" :showConfirmButton="code == 401 || code == 402"
				:showCancelButton="true" @confirm="onModel"></u-modal>
		</view>

		<!-- 推广二次确认 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="show_submit" @close="show_submit = false" mode="center" bgColor="transparent"
				:safeAreaInsetBottom="false">
				<view class="show_submit">
					<view class="submit_title">动态推广</view>
					<view class="submit_content flex_center">
						<view class="image">
							<image :src="type == 1 ? artice.image : live.cover_img" mode="aspectFill"></image>
						</view>
						<view class="text">
							<view class="content_text hidden_3">
								{{ type == 1 ? artice.content : live.name }}
							</view>
							<view class="text_item flex_r_between">
								<text>曝光量</text>
								<view>{{ submit_config.num }}曝光量</view>
							</view>
							<view class="text_item flex_r_between">
								<text>推广费</text>
								<i>{{ (Number(submit_config.price) * 10).toFixed(0)}}金币</i>
							</view>
						</view>
					</view>
					<view class="submit_from">
						<view class="label">投放画像</view>
						<view class="item flex_r_between">
							<text>地区</text>
							<text>{{ areaSelect.length ? `已选择${areaSelect.length}个地区` : '不限' }}</text>
						</view>
						<view class="item flex_r_between">
							<text>性别</text>
							<text>{{ sex }}</text>
						</view>
						<view class="item flex_r_between">
							<text>年龄</text>
							<text>{{ min ? `${min} - ${max}` : '不限' }}</text>
						</view>
					</view>

					<view class="submit_btn" @click="onSubmit">确认推广</view>

					<view class="close_icon" @click="show_submit = false">
						<u-icon name="close-circle" size="40rpx"></u-icon>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 推广成功 展示获得次数 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :closeOnClickOverlay="true" mode="center" :show="get_wheel" bgColor="transparent"
				@close="get_wheel = false">
				<view class="get_wheel flex_c"
					:style="`background: url(${$util.prefix('extension/extension_success_detail_bg.png')}) 0 0 no-repeat;`">

					<view class="get_wheel_title">助力作品</view>

					<view class="get_wheel_content flex_center">
						<view class="image">
							<image :src="artice.image" mode="aspectFill"></image>
						</view>
						<view class="text">
							<view class="content_text hidden">
								{{ artice.content }}
							</view>
							<view class="text_item flex_r_between">
								<text>曝光量</text>
								<view>{{ submit_config.num }}曝光量</view>
							</view>
							<view class="text_item flex_r_between">
								<text>推广费</text>
								<i>{{ (Number(submit_config.price) * 10).toFixed(0)}}金币</i>
							</view>
						</view>
					</view>

					<view class="get_wheel_text flex_center">
						<text>推广中</text>
						<view>详细数据请前往推广订单查看</view>
					</view>

					<view class="get_wheel_rich flex_c">
						<!-- <view>奖励xxx人气豆</view> -->
						<view>恭喜您获得</view>
						<!-- <text>您可以直接收下，也可以兑换xxx次抽奖机会 获得更多人气豆</text> -->
						<!-- <text>{{ wheel_num }}次抽奖机会</text> -->
						<text>{{ submit_config.num }}曝光量</text>
					</view>


					<view class="get_wheel_btn flex_r_around">
						<!-- <view class="btn_item cancel" @click="submitWheel(1)">直接收下</view> -->
						<!-- <view class="btn_item confim" @click="submitWheel(2)">兑换抽奖机会</view> -->
						<view class="btn_item confim flex_r_around" @click="submitWheel(2)">
							<text>确认</text>
						</view>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 加载 loading -->
		<wLoading ref="loading"></wLoading>

	</view>
</template>

<script>
	import artice from './components/artice.vue';
	import card from './components/card.vue';
	import live from './components/live.vue';
	import wheel from './components/wheel.vue';
	import order from '../generalization/order.vue';
	import wLoading from "@/components/w-loading/w-loading.vue";
	export default {
		components: {
			artice,
			card,
			live,
			wheel,
			order,
			wLoading,
		},
		data() {
			return {
				platform: 'android',

				tab: 1,

				content_tab: 1,

				// 类型:1=作品,2=房间,3=商品,4=名片
				type: 1,

				work_config: [],
				card_config: [],
				live_config: [],
				config: [],


				// 提交参数 投放地区
				areaSelect: [],
				sex: '不限',
				min: '',
				max: '',
				config_id: 0,
				config_price: 0,
				config_num: 0,
				pay_type: 6,



				// 弹窗控制
				picker_flag: false,
				age_flag: false,
				to_pay_show: false,


				// 用户资料
				user: {},
				card: {},
				artice: {},
				live: {},

				show_artice: true,
				show_live: true,

				// 动态 or 卡片列表
				list: [],
				page: 1,
				total: 1,

				card_list: [],
				card_page: 1,
				card_total: 1,

				card_balance: '0.00',

				balance: '0.00',

				// 控制转盘是否显示
				isShow: 0,

				order_id: 0,

				show_pay: false,

				code: 0,
				showmodel: false,
				msg: '',

				loading: false,

				// 确认推广弹窗
				show_submit: false,
				submit_config: {},
				flag: true,

				// 获取 N 次抽奖机会
				get_wheel: false,

				wheel_num: 0,
			}
		},
		methods: {

			toPub() {
				this.$native.toPublish();
				if (uni.getSystemInfoSync().platform == 'android') {
					this.$native.backAction();
				}
			},

			preventHandler() {
				return;
			},

			getUserBalance() {
				this.$post('/user_balance/getUserBalance').then(res => {
					this.card_balance = res.data.card_balance;
				});
			},

			onTab(e) {
				this.tab = e;
				if (e == 1) {
					this.$nextTick(() => {
						uni.pageScrollTo({
							scrollTop: 0
						});
					});
				}
			},

			onType(e) {
				this.type = e;
				this.setConfig();
			},

			readyPay() {

				var balance = Number(this.card_balance);

				if (uni.getSystemInfoSync().platform == 'android') {
					this.to_pay_show = true;
				} else {
					this.pay_type = 3;
					this.onSubmit();
				}

			},

			getCardInfo() {
				this.$get('/article/getProviderArticleList', {
					type: 4,
					provider_id: this.user.provider_id,
					page: this.card_page
				}).then(res => {
					this.card_total = res.data.total;
					this.card_list.push(...res.data.data);
					if (res.data.data.length && this.card_page == 1) {
						this.$nextTick(() => {
							this.setCard(res.data.data[0])
						});
					}
				});
			},

			setCard(item) {
				this.$nextTick(() => {
					this.card = item;
					this.$refs.card.card = item;
				});
			},

			getMoreCard() {
				if (this.card_total > this.card_list.length) {
					this.card_page++;
					this.getCardInfo();
				}
			},

			getArticeInfo() {
				this.loading = true;
				this.$get('/article/getProviderArticleList', {
					provider_id: this.user.provider_id,
					page: this.page
				}).then(res => {
					this.loading = false;
					this.total = res.data.total;
					this.list.push(...res.data.data);
					if (res.data.data.length && this.page == 1) {
						this.$nextTick(() => {
							this.setArtice(res.data.data[0]);
						});
					}
				});
			},

			setArtice(item) {
				this.$nextTick(() => {
					this.artice = item;
				});
			},

			getLiveInfo() {
				this.$refs.loading.open();
				this.$post('/popularize/getMyRoomInfo', {}, true, (res) => {
					this.$refs.loading.close();
					return this.$util.msg(res.msg);
				}).then(res => {
					this.$refs.loading.close();
					this.live = res.data;
					if (this.live.id) {
						this.show_submit = true;
					} else {
						return this.$util.msg('未查询到直播间信息，请先创建直播间')
					}
				});
			},

			getMoreArtice() {
				if (this.total > this.list.length) {
					this.page++;
					this.getArticeInfo();
				}
			},

			setConfig() {
				if (this.type == 7) {
					this.config = this.card_config;
				}

				if (this.type == 1) {
					this.config = this.work_config;
				}

				if (this.type == 2) {
					this.config = this.live_config;
				}
				if (this.config.length) {
					this.config_id = this.config[0].id;
					this.config_num = this.config[0].num;
					// if (uni.getSystemInfoSync().platform == 'android') {
					this.config_price = this.config[0].price;
					// } else {
					// 	this.config_price = this.config[0].ios_price;
					// }
				}

			},

			getConfig() {
				this.$post('/popularize/getPopularizeConfig').then(res => {
					res.data.list.forEach(element => {
						if (element.id == 1) {
							this.work_config = element.child;
						}

						if (element.id == 2) {
							this.live_config = element.child;
						}

						if (element.id == 7) {
							this.card_config = element.child;
						}
					});
					this.setConfig();
				});
			},

			chooseConfig(item) {
				this.config_id = item.id;
				// if (uni.getSystemInfoSync().platform == 'android') {
				this.config_price = item.price;
				// } else {
				// this.config_price = item.ios_price;
				// }
				this.config_num = item.num;
			},

			// 选择地址
			toChooseAddress() {
				uni.navigateTo({
					url: '/pages/generalization/address',
					events: {
						getAddress: (data) => {
							this.areaSelect = data.address;
						}
					},
					success: res => {
						// console.log(res,'传递');
						// res.eventChannel.emit('defultAddress', this.areaSelect)
					}
				});
			},

			// 性别
			onSex(e) {
				this.picker_flag = false;
				this.sex = e.value[0];
			},

			// 年龄
			ageSubmit() {
				var min = this.min;

				if (!this.min) {
					return this.$util.msg('请输入投放年龄');
				}
				if (!this.max) {
					return this.$util.msg('请输入投放年龄');
				}

				if (min > this.max) {
					this.min = this.max
					this.max = min
				}

				if (this.min < 18 || this.max < 18) {
					return this.$util.msg('投放年龄最低为18岁');
				}

				this.age_flag = false;
			},

			// 提交弹窗
			readySubmit() {
				if (this.type == 1) {
					if (!this.artice.id) {
						return this.$util.msg('请先选择推广作品');
					} else {
						this.submit_config = this.work_config.find(item => item.id == this.config_id);
						this.show_submit = true;
					}
				} else {
					this.submit_config = this.live_config.find(item => item.id == this.config_id);
					this.getLiveInfo();
				}
			},

			endSubmit() {
				this.show_submit = false;
				this.$refs.loading.close();
				this.flag = true;
			},

			// 总提交
			onSubmit() {
				if (!this.flag) {
					return;
				}
				if (this.min && this.max && (this.min < 18 || this.max < 18)) {
					return this.$util.msg('投放年龄最低为18岁');
				}

				if (!this.artice.id && this.type == 1) {
					return this.$util.msg('请先选择推广作品');
				}

				this.$refs.loading.open();
				this.flag = false;

				var active_id = this.type == 1 ? this.artice.id : this.user.id;
				this.$post('/popularize/savePopularize', {
					type: this.type,
					district: JSON.stringify(this.areaSelect),
					gender: this.sex == '男' ? 1 : this.sex == '女' ? 0 : 2,
					age: this.min ? `${this.min}-${this.max}` : '',
					// 支付方式 更改金币支付 pay_type: 6
					// pay_type: this.pay_type,
					pay_type: 6,
					active_ids: active_id,
					popularize_config_id: this.config_id,
					num: this.config_num,
					profile: '',
					account: uni.getStorageSync('account') ? uni.getStorageSync('account') : '1',
				}, false, (res) => {
					this.endSubmit();
					if (res.code == 401) {
						if (uni.getSystemInfoSync().platform == 'android') {
							this.$native.toJinBiRecharge()
						} else {
							this.$native.toJinBiRecharge()
						}
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							confirmText: '我知道了',
						})
					}
				}).then(res => {
					this.order_id = res.data.id;
					this.to_pay_show = false;
					this.getWheelNum(this.config_id);
					this.get_wheel = true;
					this.getInitInfo();
					this.endSubmit();
					// if (this.pay_type == 1) {
					// 	// 微信支付
					// 	this.$native.toPay(this.pay_type, res.data.id, 'popularizePay');
					// }

					// if (this.pay_type == 2) {
					// 	// 支付宝支付
					// 	this.$native.toPay(this.pay_type, res.data.id, 'popularizePay');
					// }

					// if (this.pay_type == 3) {
					// 	// ios内购
					// 	var ios_config_id = 0;
					// 	if (this.type == 1) {
					// 		this.work_config.forEach(element => {
					// 			if (element.id == this.config_id) {
					// 				ios_config_id = element.ios_config_id;
					// 			}
					// 		});
					// 	}

					// 	if (this.type == 2) {
					// 		this.live_config.forEach(element => {
					// 			if (element.id == this.config_id) {
					// 				ios_config_id = element.ios_config_id;
					// 			}
					// 		});
					// 	}

					// 	if (this.type == 7) {
					// 		this.card_config.forEach(element => {
					// 			if (element.id == this.config_id) {
					// 				ios_config_id = element.ios_config_id;
					// 			}
					// 		});
					// 	}

					// 	this.$native.toPay(3, res.data.id, 'popularizePay', ios_config_id);
					// }
				});
			},

			toBottom() {
				this.tab = 1;
				this.$nextTick(() => {
					uni.pageScrollTo({
						selector: '.wheel_bottom'
					});
				});
			},

			getUser() {
				this.$post('/user/info').then(res => {
					this.user = res.data;
					uni.setStorageSync('user', res.data);
					// this.getCardInfo();
					this.getArticeInfo();
					// this.getLiveInfo();
				});
			},

			// 抽奖初始化
			getInitInfo() {
				this.$get('/active.trafficPrizeV2/getInitInfo').then(res => {
					// this.isShow = res.data.isShow;
					// 暂时注销抽奖
					// if (res.data.isShow == 1) {
					// 	this.$nextTick(() => {
					// 		this.$refs.wheel.prizeList = res.data.prizeList;
					// 		this.$refs.wheel.haveNum = res.data.haveNum;
					// 		this.toBottom();
					// 	});
					// }
				});
			},

			getPayStatus(type) {
				if (type == 'popularizePay') {
					this.to_pay_show = false;
					this.getWheelNum(this.config_id);
					this.get_wheel = true;
					this.$post('/pay/get_pay_status', {
						order_id: this.order_id,
						// type 4 推广
						type: 4,
					}, false, () => {
						this.getInitInfo();
					}).then(res => {
						this.getInitInfo();
					});
				}
			},


			submitWheel(type) {
				this.get_wheel = false;
				// if (type != 1) {
				// 	this.$util.toUrl('/pages/extension/blind');
				// }
			},

			getBlance() {
				this.$post('/jinbi/getBalance', {}, false).then(res => {
					this.balance = res.data.balance;
				})
			},

			getWheelNum(id) {
				var index = 0;
				var price = 1;
				if (this.type == 1) {
					index = this.work_config.findIndex((element) => element.id == id);
					price = Number(this.work_config[index].price);
				} else {
					index = this.live_config.findIndex((element) => element.id == id);
					price = Number(this.live_config[index].price);
				}
				this.wheel_num = Math.floor(price / 10);
			},

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			window.getPayStatus = this.getPayStatus;
			this.getUser();
			this.getConfig();
			this.platform = uni.getSystemInfoSync().platform;
			// this.getUserBalance();
			this.getInitInfo();
			// this.getBlance();
		},

		onReachBottom() {
			// if(this.tab == 1){
			// 	this.$refs.wheel.reach();
			// }

			if (this.tab == 2) {
				this.$refs.order.reachBottom();
			}
		},
	}
</script>

<style lang="less" scoped>
	.extension {
		padding-bottom: 200rpx;
	}

	.nav {
		padding-top: var(--paging-head-top);
		padding-left: 16rpx;
		padding-right: 16rpx;
		width: calc(100vw - 32rpx);
		background: #FFF;
		height: 80rpx;
		position: fixed;
		box-sizing: content-box;
		top: 0;
		left: 0;
		z-index: 99;

		.icon_back {
			padding: 10rpx;
		}

		.nav_tab {
			width: 536rpx;
			height: 70rpx;
			background: #F0F0F0;
			border-radius: 32rpx;
			padding: 4rpx;

			.red {
				color: #FD2A53;
				font-weight: bold;
			}

			view {
				flex: 1;
				text-align: center;
				border-radius: 30rpx;
				height: 56rpx;
				line-height: 56rpx;
			}

			#select {
				background: #FFFFFF;
			}
		}
	}

	.tab {
		.item {
			flex: 1;
			text-align: center;
			font-size: 28rpx;
			color: #131313;
			padding: 24rpx 0;
		}

		#select {
			font-weight: 500;
			color: #FD2A53;
		}
	}

	.card_list_box {
		background: #FFFFFF;
		margin: 20rpx 32rpx 0;
		padding: 24rpx;
		border-radius: 24rpx;

		.item {
			border-radius: 26rpx;
			overflow: hidden;
			position: relative;
			flex-shrink: 0;
			margin-right: 16rpx;
			border: 4rpx solid transparent;
			width: 248rpx;
			height: 328rpx;

			.icon {
				display: none;
				position: absolute;
				z-index: 10;
				right: 8rpx;
				top: 8rpx;
			}
		}

		#select {
			border: 4rpx solid #FD2A53;

			.icon {
				display: block;
			}
		}
	}

	.form {
		margin: 20rpx 32rpx 20rpx;
		background: #FFFFFF;
		padding: 0 0 34rpx;
		border-radius: 24rpx;

		.form_title {
			font-weight: 500;
			font-size: 30rpx;
			color: #131313;
			line-height: 42rpx;
			padding: 24rpx;
		}

		.tab {
			padding: 0 24rpx 60rpx;
			height: 160rpx;
			background-size: 100% !important;
			margin-bottom: -30rpx;

			#select {
				font-weight: 500;
				font-size: 30rpx;
				color: #131313;
			}

			view {
				flex: 1;
				font-weight: 500;
				font-size: 30rpx;
				color: #999999;
				text-align: center;
			}
		}

		.config_box {
			padding: 0 24rpx;
		}

		.config {
			position: relative;
			z-index: 2;

			#select {
				background: #FFEFF2;
				border: 2rpx solid #FD2A53;

				.line {
					background: #FFDCE3;
				}
			}

			.item {
				min-width: 150rpx;
				height: 168rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				border: 2rpx solid #EEEEEE;
				padding: 20rpx 16rpx 0 16rpx;
				margin-right: 12rpx;
				flex-shrink: 0;

				.top {
					i {
						font-weight: 600;
						font-size: 28rpx;
						color: #131313;
						line-height: 40rpx;
						font-style: normal;
					}

					text {
						font-size: 24rpx;
						color: #131313;
						line-height: 28rpx;
					}
				}

				.line {
					height: 2rpx;
					background: #EEEEEE;
					margin: 18rpx 0;
				}

				.price {
					font-weight: 600;
					font-size: 28rpx;
					color: #FD2A53;
					line-height: 32rpx;
				}
			}
		}

		.content {
			position: relative;
			z-index: 2;
			padding: 0 24rpx;

			.content_list {
				height: 100rpx;
				background: #F8F8F8;
				border-radius: 16rpx;
				overflow: hidden;
				padding: 0 32rpx;
				margin-bottom: 20rpx;

				.label {
					font-size: 28rpx;
					color: #131313;
					line-height: 40rpx;
					margin-right: 32rpx;
				}

				.right {
					flex: 1;
					overflow: hidden;

					text {
						flex: 1;
						font-size: 28rpx;
						color: #999999;
						line-height: 40rpx;
						text-align: right;
					}
				}
			}
		}
	}

	.fixed_btn {
		width: 100vw;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		padding: 0 32rpx 68rpx;

		.price {
			text {
				font-weight: 600;
				font-size: 32rpx;
				color: #131313;
				line-height: 40rpx;
			}

			view {
				font-weight: 600;
				font-size: 32rpx;
				color: #FD2A53;
				line-height: 40rpx;
				margin-left: 12rpx;
			}
		}

		.blacne {
			margin-top: 12rpx;

			text {
				font-size: 32rpx;
				color: #666666;
				line-height: 40rpx;
			}

			view {
				font-size: 28rpx;
				color: #FD2A53;
				line-height: 34rpx;
				margin-left: 12rpx;
			}
		}

		.view {
			width: 200rpx;
			height: 80rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}

	.age {
		height: 40vh;
		padding: 20rpx 32rpx 110rpx;
		position: relative;

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #131313;
			height: 60rpx;
			line-height: 60rpx;
			margin-bottom: 40rpx;
		}

		.num {
			margin: 0 16rpx;
			border: 4rpx solid #eee;
			padding: 10rpx;
			border-radius: 16rpx;
		}

		.age_button {
			width: 686rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 48rpx;
			position: absolute;
			bottom: 20rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

	}

	.to_pay_show {
		padding: 32rpx 32rpx 64rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}

		.price {
			margin: 34rpx 0 24rpx;

			i {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
				font-style: normal;
			}

			text {
				font-weight: 500;
				font-size: 64rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}

		.pay_type {
			background: #F8F8F8;
			border-radius: 16rpx;
			width: 100%;
			margin: 0 32rpx 64rpx;

			.item {
				height: 100rpx;
				padding: 0 32rpx;

				.left {
					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
					}
				}

				.right {
					image {
						width: 40rpx;
						height: 40rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
						margin-right: 30rpx;
					}
				}
			}
		}

		.btn {
			width: 560rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

	}

	.popup {
		width: 640rpx;
		background: linear-gradient(136deg, #4E78CC 0%, #353AB6 55%, #6212BC 100%);
		border-radius: 40rpx;
		padding: 40rpx 0 84rpx;
		position: relative;

		.popup_title {
			color: transparent;
			background-image: linear-gradient(34deg, #C3D8FF 0%, #F3DEF8 55%, #B994FF 100%);
			background-clip: text;
			font-size: 48rpx;
			line-height: 58rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		.list {
			padding: 0 48rpx;

			max-height: 40vh;

			.item_text {
				margin-top: 10rpx !important;
			}

			.item {
				margin-top: 40rpx;
				align-items: flex-start;

				.index {
					width: 48rpx;
					height: 48rpx;
					border-radius: 24rpx;
					background: linear-gradient(117deg, #B9D2FE 0%, #F3DEF8 55%, #9C7ADB 100%);
					font-weight: 600;
					font-size: 36rpx;
					color: #6602D1;
					line-height: 48rpx;
					text-align: center;
					margin-right: 18rpx;
					flex-shrink: 0;
				}

				.no {
					background: transparent;
				}

				text {
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}
		}

		.close {
			position: absolute;
			right: 0;
			top: 0;
			padding: 16rpx;
		}

		.popup_text {
			color: transparent;
			background-image: linear-gradient(34deg, #B994FF 0%, #F3DEF8 55%, #C3D8FF 100%);
			background-clip: text;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 50rpx;
		}

		.btn {
			view {
				width: 248rpx;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 28rpx;
				line-height: 88rpx;
				text-align: center;
			}

			.btn1 {
				background: #F1F1F1;
				color: #333333;
			}

			.btn2 {
				background: #FD2A53;
				color: #FFF;
				margin-left: 24rpx;
			}
		}
	}

	.show_submit {
		width: 616rpx;
		padding: 40rpx 46rpx 60rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		position: relative;

		.submit_title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.submit_content {
			overflow: hidden;

			.image {
				width: 144rpx;
				height: 194rpx;
				border-radius: 16rpx;
				overflow: hidden;
				margin-right: 18rpx;

				image {
					width: 144rpx;
					height: 194rpx;
				}
			}

			.text {
				flex: 1;

				.content_text {
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					padding-bottom: 10rpx;
				}

				.text_item {
					margin-top: 14rpx;

					text {
						font-size: 26rpx;
						color: #666666;
						line-height: 36rpx;
					}

					view {
						font-weight: 500;
						font-size: 26rpx;
						color: #131313;
						line-height: 36rpx;
					}

					i {
						font-weight: 600;
						font-size: 32rpx;
						color: #FD2A53;
						line-height: 44rpx;
						font-style: normal;
					}
				}
			}
		}

		.submit_from {
			padding: 24rpx 0 0;
			border-top: 2rpx solid #F1F1F1;
			margin-top: 42rpx;

			.label {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				margin-bottom: 12rpx;
			}

			.item {
				padding: 12rpx 0;

				text {
					font-size: 26rpx;
					color: #666666;
					line-height: 36rpx;
				}
			}

		}

		.submit_btn {
			width: 458rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 48rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			margin: 50rpx auto 0;
		}

		.close_icon {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}

	}

	.get_wheel {
		width: 616rpx;
		background-size: 100% !important;
		padding: 40rpx 0 60rpx;
		border-radius: 36rpx;
		overflow: hidden;
		max-height: 828rpx;

		.get_wheel_title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}

		.get_wheel_content {
			overflow: hidden;
			margin: 40rpx 0 24rpx;
			padding: 0 46rpx;
			width: 100%;

			.image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 16rpx;
				overflow: hidden;
				margin-right: 18rpx;

				image {
					width: 144rpx;
					height: 194rpx;
				}
			}

			.text {
				flex: 1;
				overflow: hidden;

				.content_text {
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					max-width: 100%;
				}

				.text_item {
					margin-top: 14rpx;

					text {
						font-size: 26rpx;
						color: #666666;
						line-height: 36rpx;
					}

					view {
						font-weight: 500;
						font-size: 26rpx;
						color: #131313;
						line-height: 36rpx;
					}

					i {
						font-weight: 600;
						font-size: 32rpx;
						color: #FD2A53;
						line-height: 44rpx;
						font-style: normal;
					}
				}
			}
		}

		.get_wheel_text {
			width: 100%;
			padding: 0 46rpx;

			text {
				font-weight: 500;
				font-size: 24rpx;
				color: #0CA904;
				line-height: 34rpx;
			}

			view {
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				line-height: 34rpx;
				margin-left: 8rpx;
			}
		}

		.get_wheel_rich {
			margin-top: 88rpx;
			padding: 0 58rpx;

			view {
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;
				margin-bottom: 24rpx;
			}

			text {
				font-size: 24rpx;
				color: #333333;
				line-height: 44rpx;
			}
		}

		.get_wheel_btn {

			margin: 44rpx 0 0;
			padding: 0 44rpx;
			width: 100%;

			.btn_item {
				width: 256rpx;
				height: 96rpx;
				border-radius: 48rpx;
				
				text {
					font-weight: 600;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}

			.cancel {
				background: #A69C9E;
			}

			.confim {
				background: #FD2A53;
			}
		}

	}
</style>